<script lang="ts">
import { h, defineComponent, PropType } from "vue";
import ValidateInput, { RulesProps } from "@/components/ValidateInput.vue";
import ValidateForm from "@/components/ValidateForm.vue";

interface Props {
  type: "input" | "select" | "radio";
  label: string;
  formKey: string;
  value: string;
  rules?: RulesProps;
  options?: Record<string, any>;
}
export default defineComponent({
  name: "RenderForm",
  props: {
    formItems: {
      type: Array as PropType<Props[]>,
      required: true,
    },
  },
  components: {
    ValidateForm,
    ValidateInput,
  },
  render() {
    return h(
      ValidateForm,
      {},
      this.formItems.map(
        (item) => (
          h("p", {
            label: item.label,
          }),
          h(ValidateInput, {
            ...this.options,
            modelValue: item.value,
            "onUpdate:modelValue": (value) =>
              this.$emit("update:modelValue", value),
            rules: this.rules,
          })
        )
      )
    );
  },
});
</script>
